<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<link rel="alternate stylesheet" type="text/css" href="newspaper-fixed.css" title="Newspaper, fixed"/>
<link rel="stylesheet" type="text/css" href="formal-fluid.css" title="Formal, fluid"/>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>Layout</h1>
    </div>
    <div id="navigation">
        <h2>Navigation</h2>
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a><ul>
                <li><a href="#">Subitem 1</a></li>
                <li><a href="#">Subitem 2</a></li>
                <li><a href="#">Subitem 3</a></li>
            </ul></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a><ul>
                <li><a href="#">Subitem 1</a></li>
                <li><a href="#">Subitem 2</a></li>
                <li><a href="#">Subitem 3</a></li>
            </ul></li>
        </ul>
    </div>
    <div id="sidebar2">
        <h2>Sidebar 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna erat, sit amet tincidunt dolor. Donec et ante id ante consequat aliquet eget suscipit orci. Praesent a orci at dui mollis luctus. Cras blandit, elit cursus auctor tincidunt, tortor dolor malesuada arcu, eu dignissim diam enim in risus. Sed a augue ante, eu mollis elit. Nunc hendrerit orci ut erat vulputate placerat. Suspendisse bibendum arcu ut leo vulputate at egestas sem vulputate. Sed eu nulla a augue hendrerit interdum. Nunc ligula erat, elementum ac mattis suscipit, malesuada vel odio. Curabitur interdum, justo eget molestie blandit, metus augue dignissim augue, et facilisis ligula eros id sem. Praesent eget tellus neque.</p>
    </div>
    <div id="sidebar1">
        <h2>Sidebar 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna erat, sit amet tincidunt dolor. Donec et ante id ante consequat aliquet eget suscipit orci. Praesent a orci at dui mollis luctus. Cras blandit, elit cursus auctor tincidunt, tortor dolor malesuada arcu, eu dignissim diam enim in risus. Sed a augue ante, eu mollis elit. Nunc hendrerit orci ut erat vulputate placerat. Suspendisse bibendum arcu ut leo vulputate at egestas sem vulputate. Sed eu nulla a augue hendrerit interdum. Nunc ligula erat, elementum ac mattis suscipit, malesuada vel odio. Curabitur interdum, justo eget molestie blandit, metus augue dignissim augue, et facilisis ligula eros id sem. Praesent eget tellus neque.</p>
    </div>
    <div id="content">
        <h2>Content</h2>
        <div id="subcontent1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna erat, sit amet tincidunt dolor. Donec et ante id ante consequat aliquet eget suscipit orci. Praesent a orci at dui mollis luctus. Cras blandit, elit cursus auctor tincidunt, tortor dolor malesuada arcu, eu dignissim diam enim in risus. Sed a augue ante, eu mollis elit. Nunc hendrerit orci ut erat vulputate placerat. Suspendisse bibendum arcu ut leo vulputate at egestas sem vulputate. Sed eu nulla a augue hendrerit interdum. Nunc ligula erat, elementum ac mattis suscipit, malesuada vel odio. Curabitur interdum, justo eget molestie blandit, metus augue dignissim augue, et facilisis ligula eros id sem. Praesent eget tellus neque.</p>
        </div>
        <div id="subcontent2">
            <h3>Subcontent</h3>
            <img src="example.jpg" width="70" height="72"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna erat, sit amet tincidunt dolor. Donec et ante id ante consequat aliquet eget suscipit orci. Praesent a orci at dui mollis luctus. Cras blandit, elit cursus auctor tincidunt, tortor dolor malesuada arcu, eu dignissim diam enim in risus. Sed a augue ante, eu mollis elit. Nunc hendrerit orci ut erat vulputate placerat. Suspendisse bibendum arcu ut leo vulputate at egestas sem vulputate. Sed eu nulla a augue hendrerit interdum. Nunc ligula erat, elementum ac mattis suscipit, malesuada vel odio. Curabitur interdum, justo eget molestie blandit, metus augue dignissim augue, et facilisis ligula eros id sem. Praesent eget tellus neque.</p>
            <h4>Paragraph title</h4>
            <table>
                <caption>Table caption</caption>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1001</td>
                        <td>Data 1001</td>
                        <td>17-12-2008</td>
                    </tr>
                    <tr>
                        <td>1005</td>
                        <td>Data 1005</td>
                        <td>21-12-2008</td>
                    </tr>
                    <tr>
                        <td>1009</td>
                        <td>Data 1009</td>
                        <td>30-12-2008</td>
                    </tr>
                    <tr>
                        <td>1010</td>
                        <td>Data 1010</td>
                        <td>03-01-2009</td>
                    </tr>
                    <tr>
                        <td>1015</td>
                        <td>Data 1015</td>
                        <td>06-01-2009</td>
                    </tr>
                    <tr>
                        <td>1029</td>
                        <td>Data 1029</td>
                        <td>12-01-2009</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">&copy; Copyright</td>
                    </tr>
                </tfoot>
            </table>
            <h4>Form</h4>
            <form>
                <fieldset>
                    <legend>Fieldset legend</legend>
                    <label for="field1">Text field</label>
                    <input type="text" id="field1" name="field1" value="Value"/><br/>
                    <label for="field2">Password field</label>
                    <input type="password" id="field2" name="field2" value="Hidden"/><br/>
                    <input type="checkbox" id="field3" name="field3" value="1"/>
                    <label for="field3">Checkbox</label><br/>
                    <label for="field5">Selection</label>
                    <select id="field5" name="field5">
                        <option value=""></option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select><br/>
                </fieldset>
                <fieldset>
                    <legend>Radio buttons</legend>
                    <input type="radio" id="field4.1" name="field4" value="1"/>
                    <label for="field4.1">Radio 1</label><br/>
                    <input type="radio" id="field4.2" name="field4" value="2"/>
                    <label for="field4.2">Radio 2</label><br/>
                    <input type="radio" id="field4.3" name="field4" value="3"/>
                    <label for="field4.3">Radio 3</label><br/>
                </fieldset>
                <fieldset>
                    <input type="submit" value="Button"/>
                </fieldset>
            </form>
        </div>
        <div id="subcontent3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna erat, sit amet tincidunt dolor. Donec et ante id ante consequat aliquet eget suscipit orci. Praesent a orci at dui mollis luctus. Cras blandit, elit cursus auctor tincidunt, tortor dolor malesuada arcu, eu dignissim diam enim in risus. Sed a augue ante, eu mollis elit. Nunc hendrerit orci ut erat vulputate placerat. Suspendisse bibendum arcu ut leo vulputate at egestas sem vulputate. Sed eu nulla a augue hendrerit interdum. Nunc ligula erat, elementum ac mattis suscipit, malesuada vel odio. Curabitur interdum, justo eget molestie blandit, metus augue dignissim augue, et facilisis ligula eros id sem. Praesent eget tellus neque.</p>
            <p>Sed ultrices felis vitae mauris elementum lacinia. Nulla tempus bibendum lacinia. Ut consectetur lectus id massa feugiat viverra. Aenean id nunc non velit fringilla scelerisque ut in nunc. Donec sagittis felis in dui interdum iaculis. Duis non libero purus, eu laoreet ipsum. Aliquam posuere mi dictum lectus tincidunt id ullamcorper felis imperdiet. Aenean pharetra, sapien id fermentum varius, metus diam eleifend metus, vel placerat orci diam et augue. Nullam tortor ipsum, placerat nec venenatis at, venenatis at quam. Suspendisse facilisis orci id metus iaculis varius. Vestibulum dictum est sed eros convallis pretium. Donec mauris ligula, rutrum eget consequat quis, imperdiet non massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mauris nibh, fringilla et tempus id, lobortis vitae mi. Praesent id eros sit amet diam eleifend pellentesque. Phasellus hendrerit arcu eros. Quisque varius neque sit amet dui eleifend a vestibulum velit pellentesque. Etiam erat urna, scelerisque a placerat sit amet, mollis at ante.</p>
        </div>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>
</body>
</html>